<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>校卡管理</title>
    <link rel="stylesheet" href="../css/main.css">

    <style>
        .center {
            margin: 60px auto 10px;
            width: 320px;
            text-align: center;
        }

        .row {
            margin-top: 5px;
            overflow: hidden;
        }

        input:not([type="checkbox"]),
        select {
            border: solid 1px grey;
            border-radius: 1px;
            padding: 5px;
            width: 200px;
            box-sizing: border-box;
            font-size: 15px;
        }

        .row>div {
            height: 45px;
            box-sizing: border-box;
            float: left;

            line-height: 45px;
        }

        .left {
            width: 80px;
            text-align: right;
        }

        .right {
            width: 240px;
            text-align: left;

        }

        button {
            width: 150px;
            padding: 10px;
            background-color: deepskyblue;
            margin-top: 20px;
            border: none;
            color: white;
            border-radius: 10px;
            font-size: 16px;
        }
    </style>

</head>

<body>

    <div id="vue-root">

        <div class="header">
            <div class="header_title" v-text="['挂失补卡','添加卡'][action]"></div>
            <a onclick="history.back()">
                <img src="../image/return.png" alt="" class="return">
            </a>
        </div>

        <div class="center">

            <div class="row">
                <div class="left">姓名：</div>
                <div class="right" v-text="name"></div>
            </div>
            <div class="row" v-if="action==0">
                <div class="left">卡号：</div>
                <div class="right" v-text="no0"></div>
            </div>
            <div class="row" v-if="action==0">
                <div class="left">是否补卡：</div>
                <div class="right">
                    <input type="checkbox" v-model="reapply">
                </div>
            </div>
            <div class="row" v-if="action==1||reapply">
                <div class="left">新卡号：</div>
                <div class="right">
                    <input placeholder="请联系学校管理员领取" v-model="no">
                </div>
            </div>
            <div>
                <button @click="submit">提交</button>
            </div>

        </div>
    </div>

    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>

    <script src="/js/common.js"></script>

    <script>

        new Vue({
            el: '#vue-root',
            data: {
                name: getTeacher().name,
                action: 1,
                reapply: false,
                no0: null,
                no: null
            },
            created: function () {
                axios.get('/t/card').then(function (res) {
                    var list = res.data;
                    if (list.length != 0) {
                        this.no0 = list[0].no;
                        this.action = 0;
                    }

                }.bind(this));
            },
            methods: {
                submit: function () {
                    if ((this.action == 1 || this.reapply) && !this.no) {
                        alert('请填写新卡号');
                        return;
                    }

                    if (this.action == 0) {
                        if (!confirm('确认挂失？')) return;
                        var s = this.reapply ? '并补卡' : '';
                        axios.post('/t/card/lost', toFormParams({ no: this.no })).then(function (res) {
                            alert('挂失' + s + '成功');
                            history.back();
                        });
                    } else if (this.action == 1) {
                        axios.post('/t/card', toFormParams({ no: this.no })).then(function (res) {
                            alert('添加成功');
                            location.reload();
                        });
                    }
                }
            }
        });

    </script>

</body>

</html>